<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=pt-BR"></script>
<script type="text/javascript">
  var map;
  var marker = null;
  var infowindow = null;
  
  function initialize() {
    var latlng = new google.maps.LatLng(-7.232604194138538, -35.8865647578125);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
    google.maps.event.addListener(map, 'click', function(event) {
        placeMarker(event.latLng);
    });
  }
  
  function placeMarker(location) {
	  var clickedLocation = new google.maps.LatLng(location);
	  if(!marker){
		  marker = new google.maps.Marker({
	      	position: location, 
	      	map: map,
	      	clickable: true
	  	  });
	  }else{
		  marker.setPosition(location);
	  }
	  attachMessage(location);
	  map.setCenter(location);
  }
  
  function attachMessage(location) {
	  var message = location.toString();
	  if(!infowindow){
		  infowindow = new google.maps.InfoWindow(
			      { content: message,
			        size: new google.maps.Size(50,50)
			      });
		   google.maps.event.addListener(marker, 'click', function() {
			    infowindow.open(map,marker);
			  }); 
	  }else{
		  infowindow.setContent(message);
	  }
	  
	}

</script>
</head>
<body onload="initialize()">
  <table style="width:100%; height:100%" border="1">
  	<tr>
  		<td style="width:30%; height:100%">
  			<div id="map_control" style="width:100%; height:100%"></div>
  		</td>
  		<td style="width:70%; height:100%">
  			<div id="map_canvas" style="width:100%; height:100%"></div>
  		</td>
  	</tr>
  </table>
</body>
</html>